import { View } from '@tarojs/components';
import DouBottom from './components/dou-bottom';
import { useEffect, useState } from 'react';
import DouCreate from './components/dou-create';
import DouVideo from './components/dou-video';
import DouVoice from './components/dou-voice';
import DouWorks from './components/dou-works';
import request from '@/utils/request';
import { getUser } from '@/utils/user';

export interface IWork {
  id: string;
  name: string;
  url: string;
  status: string;
  userId: string;
  createTime: string;
  updateTime: string;
}

export interface IVideo {
  createTime: string;
  id: string;
  name: string;
  pic: string;
  updateTime: string;
  url: string;
  userId: string;
}

export interface IVoice {
  id: string;
  userId: string;
  name: string;
  url: string;
  voiceId: string;
  status: string;
  createTime: string;
  updateTime: string;
}

const defaultVoiceList = [
  {
    id: 'default1',
    userId: '',
    name: '测试声音女',
    url: 'https://jgn.oss-cn-beijing.aliyuncs.com/ai-entrepreneur-tool/longwan.mp3',
    voiceId: 'longwan',
    status: 'COMPLETED',
    createTime: '',
    updateTime: '',
  },
  {
    id: 'default2',
    userId: '',
    name: '测试声音男',
    url: 'https://jgn.oss-cn-beijing.aliyuncs.com/ai-entrepreneur-tool/clongcheng.wav',
    voiceId: 'longcheng',
    status: 'COMPLETED',
    createTime: '',
    updateTime: '',
  },
  {
    id: 'default3',
    userId: '',
    name: '戈丁声音',
    url: 'https://jgn.oss-cn-beijing.aliyuncs.com/ai-entrepreneur-tool/27dba03a64990932cea83af7f6821930.m4a',
    voiceId: 'cosyvoice-testpfx-32b0fadb5b6f41e3b4506da9f3295bf0',
    status: 'COMPLETED',
    createTime: '',
    updateTime: '',
  },
];

export default function Index() {
  const user = getUser();

  const [tabbarValue, setTabbarValue] = useState(0);
  const onTabbarChange = (index: number) => {
    setTabbarValue(index);
  };
  const [videoList, setVideoList] = useState<IVideo[]>([]);
  // const videoList: IVideo[] = [{
  //   url: 'https://media.w3.org/2010/05/sintel/trailer.webm',
  //   title: '视频1',
  //   cover: 'https://media.w3.org/2010/05/sintel/trailer.webm',
  // },{
  //   url: 'https://media.w3.org/2010/05/sintel/trailer.webm',
  //   title: '视频2',
  //   cover: 'https://media.w3.org/2010/05/sintel/trailer.webm',
  // },{
  //   url: 'https://media.w3.org/2010/05/sintel/trailer.webm',
  //   title: '视频3',
  //   cover: 'https://media.w3.org/2010/05/sintel/trailer.webm',
  // }]
  // const voiceList: IVoice[] = [
  //   {
  //     url: 'https://www.w3school.com.cn/i/horse.mp3',
  //     title: '马的声音',
  //   },
  //   {
  //     url: 'https://www.w3school.com.cn/i/song.mp3',
  //     title: '轻音乐',
  //   }
  // ]
  // const worksList: IWork[] = [
  //   {
  //     url: 'https://media.w3.org/2010/05/sintel/trailer.webm',
  //     name: '视频1',
  //     createTime: '2025-02-11T04:00:55.000Z',
  //     id: '1',
  //     updateTime: '2025-02-11T04:00:55.000Z',
  //     userId: '1',
  //     status: EnumWorkStatus.SUCCESS,
  //   },
  //   {
  //     url: 'https://media.w3.org/2010/05/sintel/trailer.webm',
  //     name: '视频1',
  //     createTime: '2025-02-11T04:00:55.000Z',
  //     id: '1',
  //     updateTime: '2025-02-11T04:00:55.000Z',
  //     userId: '1',
  //     status: EnumWorkStatus.FAIL,
  //   },
  // ];
  const [voiceList, setVoiceList] = useState<IVoice[]>([]);
  const [worksList, setWorksList] = useState<IWork[]>([]);

  useEffect(() => {
    if(!user?.id) {
      return;
    }
    requestForVideo();
    requestForVoice();
    requestForWorks();
    // 每10秒请求一次
    const interval = setInterval(() => {
      requestForVoice();
      requestForWorks();
    }, 10000);
    return () => clearInterval(interval);
  }, []);

  const requestForVideo = async () => {
    const res = await request.get<IVideo[]>('/video/query', {
      userId: user.id,
    });
    console.log('res', res);
    setVideoList(res);
  };

  const requestForVoice = async () => {
    const res = await request.get<IVoice[]>('/voice/query', {
      userId: user.id,
    });
    console.log('res', res);
    // 判断一下数组长度，如果和之前的相等，不更新
    // 过滤掉状态不是COMPLETED
    setVoiceList((old)=>{
      if (old.length === res.length) {
        return old;
      }
      return [
        ...res.filter((item) => item.status === 'COMPLETED'),
        ...defaultVoiceList,
      ]
    });
  };

  const requestForWorks = async () => {
    const res = await request.get<IWork[]>('/work/query', {
      userId: user.id,
    });
    console.log('res', res);
    setWorksList(res);
  };

  const renderContent = () => {
    switch (tabbarValue) {
      case 0:
        return (
          <DouCreate
            onTabbarChange={onTabbarChange}
            videoList={videoList}
            voiceList={voiceList}
          />
        );
      case 1:
        return <DouVideo onRefresh={requestForVideo} videoList={videoList} />;
      case 2:
        return <DouVoice onRefresh={requestForVoice} voiceList={voiceList} />;
      case 3:
        return (
          <DouWorks onTabbarChange={onTabbarChange} worksList={worksList} />
        );
    }
  };
  return (
    <View className="dou-share-to-video">
      {renderContent()}
      <DouBottom value={tabbarValue} onChange={onTabbarChange} />
    </View>
  );
}
